<template>
  <div class="shop-food-detail">
    <shop-food-detail-nav-bar />
    <img :src="this.imagePath" alt="" class="img" />
    <section class="text">
      <div class="desc">
        <span v-if="query.description">{{ query.description }}</span>
      </div>
      <div class="name">
        {{ query.name }}
      </div>
      <div class="rating">
        <span>评分</span>
        <span class="starts">
          <i
            v-for="(item, index) in Math.floor(query.rating)"
            class="start"
          ></i>
          <span v-if="Math.floor(query.rating) < 5">
            <i
              class="start"
              v-if="String(query.rating).split('.')[1] > 0"
              :style="{
                'background-position-y':
                  String(query.rating).split('.')[1] >= 5 ? '30px' : '20px',
              }"
            ></i>
            <i
              class="start"
              v-else
              :style="{
                'background-position-y': '10px',
              }"
            ></i>
          </span>
        </span>
        <span class="rat">{{ query.rating }}</span>
      </div>
      <div class="order">
        <div>月售 {{ query.month_sales }} 单</div>
        <div class="price">售价 {{ query.price }} 起</div>
      </div>
      <div class="assess">
        <div class="rating-count">评论数 {{ query.rating_count }}</div>
        <div class="rate">好评率 {{ query.satisfy_rate }}%</div>
      </div>
    </section>
  </div>
</template>

<script>
import ShopFoodDetailNavBar from "./childComps/ShopFoodDetailNavBar";
export default {
  data() {
    return {
      imagePath: "",
      query: {},
    };
  },
  created() {
    this.imagePath = `http://elm.cangdu.org/img/${this.$route.query.image_path}`;
    this.query = this.$route.query;
  },
  components: {
    ShopFoodDetailNavBar,
  },
};
</script>
<style lang="less" scoped>
.shop-food-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 46px;
  left: 0;
  background-color: #fff;
  .img {
    width: 100%;
  }
  .text {
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #7a7c7e;
    .desc {
      margin-bottom: 10px;
      color: #666666;
    }
    .name {
      margin-bottom: 5px;
      color: #333333;
    }
    .rating {
      .starts {
        margin: 0 5px;
        .start {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url("~assets/img/msite/start.png");
          background-size: 100%;
        }
      }
      .rat {
        color: #ffd65b;
      }
    }
    .order {
      margin: 8px 0;
    }
    .order,
    .assess {
      div {
        display: inline-block;
      }
      & div:nth-child(2) {
        margin-left: 5px;
      }
      .price {
        color: #ffd65b;
      }
    }
  }
}
</style>